<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑用户</title>
</head>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet"
	href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="./resources/js/jquery.min.js"></script>
<script src="./resources/js/common.js"></script>
<body>
<div id="mainApp">
  <el-container style="padding-top:20px;">
	  <el-header style="heighe:10px;">
		  <el-row :gutter="24">
			<el-col :span="2" :xs="2" :sm="2" :md="2" :lg="2">
				<el-breadcrumb class="breadcrumb-inner">
					<el-breadcrumb-item><h2>编辑用户</h2></el-breadcrumb-item>
				</el-breadcrumb>
			</el-col>
		  </el-row>
	  </el-header>
	  <el-main>
	  	  <el-card calss="box-card">
	  	  	<el-row :gutter="24">
	  	  		<el-col :xs="2" :sm="2" :md="2" :lg="2">账户名称</el-col>
		  		<el-col :xs="6" :sm="6" :md="6" :lg="6">
		  			<el-input  placeholder="请输入用户名称" v-model="user.account"></el-input>
		  		</el-col>
	  	  	    <el-col :xs="2" :sm="2" :md="2" :lg="2">真实姓名</el-col>
		  		<el-col :xs="6" :sm="6" :md="6" :lg="6">
		  			<el-input  placeholder="请输入用户名称" v-model="user.realName"></el-input>
		  		</el-col>
		  	</el-row>
		  	<el-row :gutter="24">
		  		<el-col :span="2" :xs="2" :sm="2" :md="2" :lg="2">用户密码</el-col>
		  		<el-col :span="6" :xs="6" :sm="6" :md="6" :lg="6">
		  			<el-input  placeholder="请输入用户密码" v-model="user.password"></el-input>
		  		</el-col>
		  		<el-col :span="2" :xs="2" :sm="2" :md="2" :lg="2">管理部门</el-col>
		  		<el-col :span="6" :xs="6" :sm="6" :md="6" :lg="6">
		  			<el-cascader :options="depData" :props="props" :show-all-levels="false" v-model="checkDep" change-on-select></el-cascader>
		  		</el-col>
		  	</el-row>
		  	<el-row :gutter="24">
	  	  	    <el-col :span="2" :xs="2" :sm="2" :md="2" :lg="2">权限列表</el-col>
				<el-col :span="6" :xs="6" :sm="6" :md="6" :lg="6">
					<el-checkbox-group v-model="user.roleList">
      					<el-checkbox v-for="role in roleData" :label="role.id" border>{{role.roleName}}</el-checkbox-button>
    				</el-checkbox-group>
		  		</el-col>
		  	</el-row>
		  	<el-row :gutter="24">
	  	  	    <el-button type="primary" @click="addUser">新增</el-button>
		  	</el-row>
		  </el-card>
	  </el-main>
  </el-container>
</div>
</body>
<script>
new Vue({
		el:"#mainApp",
	    data:{
	    	roleData:[],
	    	user:{
	    		account:'',
	    		realName:'',
	    		password:'',
	    		roleList:[],
	    		departmentCode:''
	    	},
	    	props:{
	    		label: 'departmentName',
	    		value: 'departmentCode',
	            children: 'depList'
	    	},
	    	depData:[],
	    	checkDep:[]
	    },
	    mounted: function (){
	    	//页面加载初始化
	    	this.findAllRoleList();
	    	this.findDepData();
	    },
	    methods: {
	      //获取所有角色列表
	      findAllRoleList(){
	    	  var _this = this;
	    	  $.get("./role/finaAllRole", function(data) {
	    		  if(data!=null){
	    			  _this.roleData = data;
	    		  }
	    	  });
	      },
	      findDepData(){
	    	  var data = getRequest();
	    	  var depCode = data['depCode'];
	    	  var _this = this;
	    	  $.get("./dep/findDepartmentTree/"+depCode, function(data) {
	    		  _this.depData = data;
	    	  }); 
	      },
	      addUser(){
	    	  var _this = this;
	    	  var data = _this.user;
	    	  var roleList = data.roleList;
	    	  var arr = new Array();
	    	  roleList.forEach(v=>{
	    		  var role={};
	    		  role['id'] = v;
	    		  arr.push(role);
	    	  })
	    	  data.roleList = arr;
	    	  var depCode = _this.checkDep;
	    	  data.departmentCode=depCode[depCode.length-1];
	    	  var userData = JSON.stringify(data);
	    	  $.ajax({
			　　　　　　　　url:"./sys/saveUser",
			　　　　　　　　type:"POST",
			　　　　　　　　data:userData,
						dataType: "json",
			　　　　　　　　contentType:"application/json;charset=utf-8",
			　　　　　　　　success:function(data){
			　　　　　　　　　　if("1"==data.code){
								_this.$alert('<strong>操作成功!</strong>', '提示', {
							          dangerouslyUseHTMLString: true
							    });
			　　　　　　　　　　}else{
								_this.$alert('<strong>操作失败!</strong>', '提示', {
							          dangerouslyUseHTMLString: true
							    });
			　　　　　　　　　　}
			　　　　		}
			　});
	      }
	    }
	  });
</script>
</html>